import { View } from "@tarojs/components";
import BySquare from "./BySquare";
import { ReactNode } from "react";

type ByStepsItem = {
  date?: ReactNode;
  title?: ReactNode;
  // tip?: string;

  // status?: "success" | "error" | "primary";
  // statusText?: string;
  slotStatus?: ReactNode;

  children?: ReactNode;
};

export default ({ date, title, slotStatus, children }: ByStepsItem) => {
  return (
    <View className={`relative flex pb-5`}>
      <View className="absolute top-[8px] left-[8px] h-full w-[2px] bg-primary" />

      <BySquare size={20} className="bg-primary mt-1 mr-2" />

      <View className="flex-auto">
        <View className="flex justify-between items-center mb-2">
          <View className="flex">
            <View>{title}</View>
            <View className="ml-1">{slotStatus}</View>
          </View>
          <View className="text-xs text-third">{date}</View>
        </View>

        {children}
      </View>
    </View>
  );
};
